<template>
  <div class="joiner-list">
    <div class="task-title">
      task name
    </div>

    <div class="item">
      <div class="joiner-name">
        报名者
      </div>
      <div class="join-time">
        报名时间
      </div>
      <div class="join-select">
        是否选择
      </div>
    </div>

    <div class="item" v-for="joiner in joinerList">
      <div class="joiner-name center-vertical">
        {{ joiner.nickname }}
      </div>
      <div class="join-time center-vertical">
        {{ joiner.join_time }}
      </div>
      <div class="join-select">
        <mt-switch v-model="joiner.is_select"></mt-switch>
      </div>
    </div>

    <div class="select-submit">
      <mt-button size="large" type="primary" @click="agreeUserJoin">分配任务</mt-button>
    </div>

    <tab-bar></tab-bar>

  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
import { Toast } from 'mint-ui';
import storeItem from '../utils/store';
import tabBar from './common/TabBar';

export default {
  name: 'joinerList',
  data() {
    return {
      taskId: 0,
      joinerList: [],
    };
  },
  methods: {
    loadJoiners() {
      axios.get('/task/task_join_user', {
        params: {
          task_base_id: this.taskId,
          token: storeItem.getItem('token'),
        },
      }).then((response) => {
        if (response.status === 200 && response.data.status === true) {
          this.joinerList = response.data.data.map((item) => {
            const element = item;
            element.is_select = ([0, 2].indexOf(item.station) === -1);
            return element;
          });
        }
      });
    },
    agreeUserJoin() {
      const agreeList = [];
      this.joinerList.forEach((joiner) => {
        if (joiner.is_select === true) {
          agreeList.push(joiner.user_id);
        }
      });
      axios.post('/task/agree_user_join', qs.stringify({
        task_id: this.taskId,
        token: storeItem.getItem('token'),
        joiner_id: JSON.stringify(agreeList),
      })).then((response) => {
        if (response.status === 200) {
          if (response.data.status === true) {
            Toast({
              message: '分配任务成功',
              duration: 1500,
            });
          } else {
            Toast({
              message: response.data.message,
              duration: 1500,
            });
          }
        }
      });
    },
  },
  mounted() {
    this.taskId = this.$route.params.taskId;
    this.loadJoiners();
  },
  components: {
    'tab-bar': tabBar,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.joiner-list {
  margin-top: -40px;
}

.task-title {
  font-size: 16px;
}
.item {
  margin-top: 20px;
  margin-bottom: 20px;
}
.joiner-name {
  display: inline-block;
  width: 20%;
  text-align: left;
}
.join-time {
  display: inline-block;
  width: 50%;
}
.join-select {
  display: inline-block;
  width: 20%;
}
.select-submit {
  margin-top: 50px;
}

</style>
